<script setup lang="ts">
import { provide, reactive, ref, watch } from 'vue';

// const props = defineProps<{
//   modelValue?: boolean;
// }>();
import { getAfterSaleListApi } from '#/api';
import { useTable } from '#/hooks/useTable';
import { auto1688stor } from '#/store';

import SearchBox from './searchBox.vue';
import TableBox from './tableBox.vue';

const auto1688 = auto1688stor();

const { nowSelectDyShop } = auto1688.auto1688; // bindShopList
const selectShop = ref<any>(nowSelectDyShop?.shopId);

const searchForm = reactive({
  platformCode: '',
  orderType: '',
  shopId: selectShop.value,
  shopName: '',
  dyOrderStatus: '',
  aliOrderStatus: '',
  goodsTitle: '',
  dyOrderId: '',
  productId: '',
  offerId: '',
  status: '',
});
const {
  tableData,
  page,
  loading,
  resetParams,
  getList,
  handleCurrentChange,
  handleSizeChange,
} = useTable({
  apiFn: getAfterSaleListApi,
  params: searchForm,
});
provide('tabInfoDatas', {
  tableData,
  page,
  loading,
  resetParams,
  getList,
  handleCurrentChange,
  handleSizeChange,
  selectShop,
  searchForm,
});
watch(selectShop, () => {
  searchForm.shopId = selectShop.value;
});
</script>

<template>
  <div class="p-4">
    <SearchBox />
    <TableBox />
  </div>
</template>
